<!--
 * Description: PKG-EPE-Cushion成本模型计算
 * Company: 联宝（合肥）电子科技有限公司
 * Author: Qiuxue.Wu
 * Date: 2020/09/28 14:31
-->

<template>
  <div class="p-cushion-cost-model">
    <div v-if="fdRowId" class="title">
      <el-link type="primary">{{ commodity }}({{ gcmFunction }})</el-link>
    </div>
    <table>
      <tr align="center" class="title">
        <td colspan="5">
          <el-input
            v-model="model.description"
            class="td-input"
            placeholder="Description"
          ></el-input>
        </td>
      </tr>

      <tr align="center" class="title">
        <td>Weight</td>
        <td>USD/KG</td>
        <td>Others</td>
      </tr>
      <tr align="center">
        <!-- Weight -->
        <td>
          <el-input v-model="model.weight" class="td-input" type="number"></el-input>
        </td>
        <!-- USD/KG -->
        <td>
          <el-input v-model="model.usd" class="td-input" type="number"></el-input>
        </td>
        <!-- Others -->
        <td>
          <el-input v-model="model.others" class="td-input" type="number"></el-input>
        </td>
      </tr>
      <tr align="center" class="title td-calc">
        <td colspan="3">Total Cost</td>
      </tr>
      <tr align="center">
        <td class="td-not-allowed td-result" colspan="3">
          {{ model.totalCost }}
        </td>
      </tr>
      <tr align="center" class="title">
        <td colspan="3">Remark</td>
      </tr>
      <tr align="center">
        <td colspan="3" style="padding:0">
          <el-input v-model="model.remark" class="textarea" type="textarea"></el-input>
        </td>
      </tr>
    </table>

    <span style="display: block;text-align: center;margin-top: 25px">
      <!--保存按钮-->
      <el-button :loading="isRequesting" size="medium" type="primary" @click="calc">
        {{ $t('button.calc') }}
      </el-button>
    </span>
  </div>
</template>
<script>
import { modelComputed, modelComputedFd } from '@/api/model/computed'

export default {
  name: 'PCushionCostModel',
  props: {
    commodity: {
      type: String,
      default: ''
    },

    gcmFunction: {
      type: String,
      default: ''
    },
    fdRowId: {
      type: String,
      default: ''
    },

    lastModel: {
      type: Object,
      default: () => {}
    }
  },

  data() {
    return {
      model: {},
      isRequesting: false
    }
  },

  created() {
    if (Object.keys(this.lastModel).length > 0) {
      this.model = this.$deepCopy(this.lastModel)
    }
  },

  methods: {
    async calc() {
      if (this.fdRowId) {
        this.calcFd()
      } else {
        this.calcSimple()
      }
    },

    async calcSimple() {
      try {
        this.isRequesting = true
        const result = await modelComputed(
          {
            costModelGcmFunc: this.gcmFunction,
            costModelCommodityType: this.commodity,
            computedParams: this.model
          },
          { msgSuccess: true, msgError: true }
        )
        this.model = result.data.computedResult
      } catch (error) {
        console.log(error)
      } finally {
        this.isRequesting = false
      }
    },

    async calcFd() {
      try {
        this.isRequesting = true
        const result = await modelComputedFd(
          {
            computedParams: {
              costModelGcmFunc: this.gcmFunction,
              costModelCommodityType: this.commodity,
              computedParams: this.model
            },

            fdRowId: this.fdRowId
          },
          { msgSuccess: true, msgError: true }
        )
        this.model = result.data.computedResult
      } catch (error) {
        console.log(error)
      } finally {
        this.isRequesting = false
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.p-cushion-cost-model {
  height: 100%;
  overflow-x: auto;
  > .title {
    text-align: right;
    padding-bottom: 15px;
  }
}
table {
  margin: 0 auto;
  border-collapse: collapse;
}
td {
  min-width: 130px;
  height: 40px;
  overflow: hidden;
  border: 1px solid #333;
  padding: 0 10px;
  word-wrap: break-word;
  word-break: normal;
  position: relative;
}
.title {
  font-weight: 600;
}
.textarea {
  height: 100%;
  /deep/ textarea {
    border: none;
  }
}
.td-input {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;

  /deep/.el-input__inner {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border: none;
    text-align: center;
  }
}

.td-not-allowed {
  cursor: not-allowed;
}

.td-calc {
  background-color: #00b0f0;
}

.td-select {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  /deep/ .el-input {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  /deep/.el-input__inner {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border: none;
    text-align: center;
  }
}

.td-result {
  color: red;
  font-weight: 700;
  background-color: #e0e0e0;
}

/deep/ input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
</style>
